<template>
  <div class="page">
    <s-header name="施工现场监管详情" :back="'/government/construction'"></s-header>
    <div class="card-box">
      <div class="header-title">建房申请单号：{{ applyForm.applyOrderNo }}</div>
      <van-divider />
      <div class="content">
        <van-cell-group>
          <van-cell title="申请人" :value="applyForm.applyName" :border="false" />
          <van-cell title="申请时间" :value="applyForm.applyTime" :border="false" />
          <van-cell title="联系电话" :value="applyForm.applyPhone" :border="false" />
          <van-cell title="申请理由" :value="applyForm.applyReasonsDesc" :border="false" />
          <van-cell title="建房类型" :value="applyForm.buildTypeName" :border="false" />
          <van-cell title="家庭住址" :value="applyForm.applyHouseAddress" :border="false" />
        </van-cell-group>
      </div>
    </div>
    <div class="card-box">
      <div class="header-title">
        <div class="header-left">施工监管</div>
        <!-- <div class="header-right" @click="addNodes">添加施工节点</div> -->
      </div>
      <van-divider />
      <div class="card-list">
        <div
          v-for="(item, index) in nodeList"
          :key="index"
          :class="{
            'card-item': true,
            'select-item': selectNodeId === item.id,
          }"
          @click.stop="handleClick(item)"
        >
          {{ item.name }}
          <span v-if="item.selected && item.applyBaseId" class="close-icon"><van-icon name="clear" /></span>
          <!--向下的三角-->
          <!-- <div :class="{ 'arrow-down': item.selected }"></div> -->
        </div>
      </div>
      <!-- <div class="record-btn" @click="addRcord">
        <van-icon name="plus" color="#3487F6" size="20" />
        添加巡查记录
      </div> -->
      <div class="history-record">
        <div class="record-title">历史巡查记录</div>
        <template v-if="recordList.length > 0">
          <div class="record-list" v-for="record in recordList" :key="record.id">
            <div class="record-item" @click.stop="handleRecord(record)">
              <div class="item-date">{{ record.checkDate }}</div>
              <div class="item-content">{{ record.presentDept }}</div>
              <div class="item-icon">
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        </template>
        <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
      </div>
    </div>
    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
      <!-- <van-button
        type="button"
        class="cus-btn btn-success"
        @click="handleFinish"
        >结束</van-button
      > -->
    </div>
    <van-dialog
      v-model:show="nodeShow"
      title="添加施工节点"
      show-cancel-button
      confirm-button-color="#3487f6"
      @confirm="saveNode"
      @cancel="cancelNode"
    >
      <van-field v-model="nodeName" border placeholder="请输入节点名称" />
    </van-dialog>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRoute, useRouter } from 'vue-router'
import { Dialog, Toast } from 'vant'
import { getPatrolSelectBuildById, deletePatrol, savePatrolBuildNodes, getPatrolSelectBuildNodes } from '@/service/patrol'
import listNull from '@/assets/Images/list_null.png'
export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      listNull: listNull,
      applyBaseId: '', //  建房id
      selectNodeId: '', //选中节点id
      applyForm: {
        applyOrderNo: '',
        applyName: '',
        applyTime: '',
        phone: '',
        reason: '',
        buildTypeName: '',
        address: '',
      },
      nodeList: [],
      recordList: [
        // {
        //   id: 0,
        //   checkDate: "2021-12-28",
        //   presentDept: "熙岭乡住建机构住建机构",
        // },
        // {
        //   id: 1,
        //   checkDate: "2021-12-28",
        //   presentDept: "熙岭乡住建机构住建机构",
        // },
        // {
        //   id: 2,
        //   checkDate: "2021-12-28",
        //   presentDept: "熙岭乡住建机构住建机构",
        // },
      ],
      nodeShow: false,
      nodeName: '',
      pages: {
        pageNo: 1,
        pagesize: 20,
      },
    })
    onMounted(() => {
      state.applyBaseId = route.query.id
      getHandleMessage()
      // getNodesMessage()
    })
    // 获取办理信息
    const getHandleMessage = async () => {
      const res = await getPatrolSelectBuildById(state.applyBaseId)
      if (res.success) {
        state.applyForm = res.body.obj.buildApplyBase
        state.nodeList = res.body.obj.nodesList
        state.selectNodeId = state.selectNodeId ? state.selectNodeId : state.nodeList[0].id
        getRecordList()
        // state.nodeList.forEach((res,index) => {
        //   if (index === 0) {
        //     res.selected = true;
        //   } else {
        //     res.selected = false;
        //   }
        // });
      }
    }
    // 返回
    const handleBack = () => {
      router.go(-1)
    }
    // 选择施工节点
    const handleClick = (item) => {
      state.selectNodeId = item.id
      getRecordList()
    }
    // 增加巡查记录节点
    const addRcord = () => {
      let url = '/government/construction/recordAdd'
      router.push({
        path: url,
        query: { applyBaseId: state.applyBaseId, nodesId: state.selectNodeId },
      })
    }
    // 获取下方巡查记录
    const getRecordList = () => {
      const pms = {
        loitBuildNodesId: state.selectNodeId,
        applyBaseId: state.applyBaseId,
        ...state.pages,
      }
      getPatrolSelectBuildNodes(pms).then((res) => {
        if (res.success) {
          state.recordList = res.body.page.list
        }
      })
    }
    // 巡查记录
    const handleRecord = (data) => {
      let url = '/government/construction/record'
      router.push({ path: url, query: { dataList: JSON.stringify(data) } })
    }
    // 增加施工节点
    const addNodes = () => {
      state.nodeName = ''
      state.nodeShow = true
    }
    // 保存节点
    const saveNode = () => {
      if (state.nodeName) {
        savePatrolBuildNodes({
          name: state.nodeName,
          applyBaseId: state.applyBaseId,
        }).then((res) => {
          if (res.success) {
            Toast.success('保存成功')
            getHandleMessage()
            state.nodeShow = false
          }
        })
      } else {
        Toast.fail('请输入节点名称')
      }
    }
    // 取消保存节点
    const cancelNode = () => {
      state.nodeShow = false
    }
    // 删除节点
    const deleteNode = (id) => {
      Dialog.confirm({
        title: '提示',
        message: '此操作将删除该施工节点!是否继续?',
      }).then(() => {
        deletePatrol(id).then((res) => {
          if (res.success) {
            Toast.success('删除成功!')
            state.selectNodeId = ''
            getHandleMessage()
          }
        })
      })
    }
    return {
      ...toRefs(state),
      handleBack,
      handleClick,
      handleRecord,
      addNodes,
      cancelNode,
      saveNode,
      getRecordList,
      addRcord,
      deleteNode,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .card-box {
    margin-top: 16px;
    padding: 4px;
    background: #ffffff;
    border-radius: 10px;
    .header-title {
      padding: 16px 0 0 16px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
    .header-right {
      padding-right: 10px;
      font-size: 14px;
      color: #3487f6;
    }
    /deep/.van-cell__title {
      font-size: 16px;
      color: #9297ae;
    }
    /deep/.van-cell__value {
      font-size: 16px;
      color: #2e3f6a;
    }
    .card-list {
      display: flex;
      padding: 10px;
      overflow-x: auto;
    }

    .card-item {
      position: relative;
      padding: 15px;
      margin-right: 10px;
      text-align: center;
      word-wrap: break-word;
      color: #2e3f6a;
      font-size: 14px;
      background: #f4f5f9;
      border-radius: 10px;
      //   flex-basis: 50px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .select-item {
      background: #3487f6;
      color: #ffffff;
    }
    .close-icon {
      font-size: 20px;
      position: relative;
      top: 2px;
      right: -3px;
      color: #ffffff;
    }
    /*箭头向下*/
    .arrow-down {
      position: absolute;
      top: 42px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #0066cc;
    }
  }
  .record-btn {
    margin: 12px 14px;
    padding: 10px 20px;
    text-align: center;
    background: #ffffff;
    border: 2px solid #c7cad8;
    border-radius: 8px;
    font-size: 16px;
    line-height: 20px;
  }
  .history-record {
    margin: 16px;
    .record-title {
      font-size: 16px;
      margin: 5px 0;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #2e3f6a;
    }
    .record-item {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      background: #f4f5f9;
      border-radius: 6px;
      width: 100%;
      padding: 15px 5px;
    }
    .item-date {
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #9297ae;
      margin-right: 10px;
    }
    .item-content {
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #2e3f6a;
      margin-right: 10px;
    }
    .item-icon {
      padding-top: 2px;
      font-size: 16px;
      color: #2e3f6a;
    }
  }
  .btn-group {
    padding: 20px 0;
    .cus-btn {
      font-size: 16px;
      width: 100%;
    }
  }
  /deep/ .van-dialog__header {
    font-size: 16px;
    font-weight: bold;
    color: #2e3f6a;
  }
  /deep/ .van-field__control {
    margin: 10px;
    padding-left: 10px;
    height: 40px;
    border: 1px solid #c7cad8;
  }
}
.empty {
  display: block;
  width: 150px;
  margin: 50px auto 20px;
}
</style>